<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mermaid 图表编辑器</title>
    <link rel="stylesheet" href="mermaid.css">
    <script src="mermaid.min.js"></script>
</head>
<body>
    <div class="header">
        <h1>Mermaid 图表编辑器</h1>
        <div class="header-controls">
                <button class="btn btn-secondary" id="new-chart">新建</button>
            <button class="btn btn-primary" id="save-chart">保存</button>
                <button class="btn btn-secondary" id="load-chart">加载</button>
        </div>
    </div>

    <div class="container">
        <div class="editor-panel">
            <div class="editor-header">
                <span>Mermaid 代码</span>
                <div class="editor-controls">
                <span class="current-chart" id="current-chart">未命名图表</span>
                    <button class="btn btn-primary" id="export-svg">导出 SVG</button>
                    <button class="btn btn-primary" id="export-png">导出 PNG</button>
                </div>
            </div>
            <div class="editor-content">
                <textarea id="mermaid-input" placeholder="请输入 Mermaid 图表代码...">graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行A]
    B -->|否| D[执行B]
    C --> E[结束]
    D --> E
    
    style A fill:#e1f5fe
    style E fill:#ffebee</textarea>
            </div>
        </div>

        <div class="resizer" id="resizer"></div>

        <div class="preview-panel">
            <div class="preview-header">
                <span>预览</span>
                <span class="zoom-level" id="zoom-level">100%</span>
            </div>
            <div class="preview-content" id="preview-content">
                <div class="loading">正在生成图表...</div>
            </div>
        </div>
    </div>

    <div class="status-bar">
        <span id="status-text">就绪</span>
        <span id="char-count">0 字符</span>
    </div>

    <!-- 保存图表模态框 -->
    <div id="save-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>保存图表</h3>
                <span class="close" id="save-close">&times;</span>
            </div>
            <div class="modal-body">
                <label for="chart-name">图表名称:</label>
                <input type="text" id="chart-name" placeholder="请输入图表名称">
                <div class="modal-buttons">
                    <button class="btn btn-primary" id="save-confirm">保存</button>
                    <button class="btn btn-secondary" id="save-cancel">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载图表模态框 -->
    <div id="load-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>加载图表</h3>
                <span class="close" id="load-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="chart-list" id="chart-list">
                    <!-- 动态加载图表列表 -->
                </div>
            </div>
        </div>
    </div>

    <script src="mermaid.js"></script>
</body>
</html>